import { Dropdown, Flex, Popconfirm, Space, Tag} from "antd";
import { ColumnsType } from "antd/es/table";
import { columnDataIndex, columnRemark, columnOrder } from "columns";
import { Link } from "react-router-dom";
import { SecurityUser } from "type/entity/SecurityUser";

import { TeamOutlined, UpCircleOutlined, MenuOutlined, CloseOutlined } from '@ant-design/icons';
import Hyacinth from "../global/Hyacinth";
import {fetchDeleteUser} from "../storage/redux/async-action/userAsyncAction";
import {ItemType} from "antd/es/menu/interface";

/** 根据用户的信息解析用户状态 */
const parseUserStatus = (_:any, user: SecurityUser) => {
    let msg = "正常";
    let color = "#1a8039";
    if (!user.enabled){
        msg = "用户禁用";
        color = "#cf1322";
    }else if (!user.accountNonLocked){
        msg = "用户锁定";
        color = "#460c59";
    }else if (!user.accountNonExpired){
        msg = "用户过期";
        color = "#732e11";
    }else if (!user.credentialsNonExpired){
        msg = "密码过期";
        color = "#776219";
    }
    return <Space>
        <Tag color={color}>{msg}</Tag>
    </Space>;
};
/** 获取用户操作列表 */
const getItems = (record: SecurityUser): ItemType[] => {
    return [
        {
            key: '/nav/admin/user/update',
            label: <Link to={"./update/"} state={record}>更新数据</Link>,
            icon: <UpCircleOutlined />
        },
        {
            key: '/nav/admin/user/role',
            label: <Link to={"./role"} state={record}>授权管理</Link>,
            icon: <TeamOutlined />
        },
        {
            key: '/nav/admin/user/menu',
            label: <Link to={"./menu"} state={record}>菜单管理</Link>,
            icon: <MenuOutlined />
        },
        {
            key: '/nav/admin/user/delete',
            label: <Popconfirm
                title={`确定删除用户 ${record.username}?`}
                onConfirm={async () => await Hyacinth.getInstance().executeDeleteDispatch(fetchDeleteUser, record.id)}
            >
                <a style={{ color: "#ca2525" }}>删除用户</a>
            </Popconfirm>,
            icon: <CloseOutlined style={{color: "#ca2525"}}/>
        }
    ];
};

const userColumns: ColumnsType<SecurityUser> = [
    columnDataIndex,
    {
        key: 'id',
        dataIndex: 'id',
        title: '用户编号',
        width: 110,
        align: "center",
        fixed: "left"
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
        width: 120,
        align: "center",
    },
    {
        key: 'identity',
        dataIndex: 'identity',
        title: '用户身份',
        width: 120,
        align: "center",
    },
    {
        key: 'status',
        title: '用户状态',
        dataIndex: 'enabled',
        width: 105,
        align: "center",
        ellipsis: {showTitle: false},
        render: parseUserStatus
    },
    columnOrder,
    columnRemark,
    {
        key: "options",
        title: "操作",
        dataIndex: "options",
        align: "center",
        width: 120,
        fixed: "right",
        render: (_, record, __) => {
            return <Space>
                <Flex align={"flex-start"} gap={"small"} vertical>
                    <Dropdown.Button type={"link"} menu={{ items: getItems(record)}}>
                        <Link to={"./details"} state={record}>详情</Link>
                    </Dropdown.Button>
                </Flex>
            </Space>;
        }
    }
];

export default userColumns;